<template>
  <div class="easy-radio">
    <ul>
      <li :class="{ active: data.value === activeValue }" v-for="(data, index) in dataList" :key="index">
        <div @click="dataSelect(data)">
          <div class="circle">
            <i class="icon" />
          </div>
          <span v-text="data.name" v-if="data.name" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'EasyRadio',
    components: {},
    props: {
      dataList: {
        type: Array,
        default() {
          return [];
        },
      },
      activeValue: {
        type: [ String, Number ],
        default: '',
      },
    },
    data() {
      return {};
    },
    computed: {},
    watch: {},
    mounted() {
    },
    created() {
    },
    methods: {
      dataSelect(data) {
        this.$emit('change', { data });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .easy-radio {
    ul {
      margin: 0 -5px;
      font-size: 0;
      text-align: center;
      li {
        display: inline-block;
        padding: 5px;
        > div {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          span {
            font-size: 12px;
            margin-left: 5px;
          }
          .circle {
            display: flex;
            flex-shrink: 0;
            box-sizing: border-box;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 20px;
            height: 20px;
            border: 1px solid #dcdfe6;
            border-radius: 16px;
            background-color: #fff;
            z-index: 1;
            transition: all 0.2s;
            .icon {
              transition: all 0.2s;
              opacity: 0;
              position: absolute;
              top: 2px;
              left: 7px;
              height: 10px;
              width: 5px;
              border-right: 1px solid #fff;
              border-bottom: 1px solid #fff;
              transform-origin: center;
              transform: rotate(40deg);
            }
          }
        }
        &.active {
          > div {
            .circle {
              background-color: #0669f0;
              border-color: #0669f0;
              .icon {
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
</style>
